1
00:00:03,000 --> 00:00:06,478
초기 Next.js 프로젝트가 설정되었습니다.

2
00:00:06,478 --> 00:00:09,186
그리고 우리는 지역 개발을 시작했습니다

3
00:00:09,186 --> 00:00:11,818
"next dev" 명령을 사용하여 서버에 연결합니다.

4
00:00:11,893 --> 00:00:15,418
이제 브라우저에서 웹사이트를 열려고 하면,

5
00:00:15,418 --> 00:00:18,698
지금은 "찾을 수 없음" 메시지가 표시됩니다.

6
00:00:18,698 --> 00:00:22,749
아직 앱에 페이지가 없기 때문입니다.

7
00:00:22,749 --> 00:00:26,059
당분간 서버를 중단하자,

8
00:00:26,059 --> 00:00:28,400
페이지를 정의하는 방법을 알아보세요.

9
00:00:28,480 --> 00:00:31,807
간단히 생성하여 홈 페이지를 추가할 수 있습니다.

10
00:00:31,807 --> 00:00:34,647
"app" 폴더 안에 새 파일,

11
00:00:34,728 --> 00:00:37,490
"page.jsx"라고 합니다.

12
00:00:37,490 --> 00:00:39,968
"레이아웃" 파일과 마찬가지로,

13
00:00:39,968 --> 00:00:43,784
"페이지" 파일은 React 구성 요소를 내보내야 합니다.

14
00:00:43,784 --> 00:00:45,876
"홈페이지"라고 부르겠습니다.

15
00:00:46,184 --> 00:00:49,562
그리고 여기에서 일부 JSX 요소를 반환할 수 있습니다.

16
00:00:49,562 --> 00:00:52,952
간단한 "h1" 제목부터 시작하겠습니다.

17
00:00:52,952 --> 00:00:55,647
"내 첫 Next.js 페이지"라고 말해요.

18
00:00:55,734 --> 00:00:59,176
이것이 우리 홈페이지의 내용이 될 것입니다.

19
00:00:59,176 --> 00:01:01,811
이 파일을 저장하고 시작해 보겠습니다.

20
00:01:01,811 --> 00:01:03,682
터미널의 서버.

21
00:01:03,752 --> 00:01:06,281
이제 우리는 "다음"을 사용할 것이기 때문에

22
00:01:06,281 --> 00:01:08,160
dev" 명령을 항상 실행하세요.

23
00:01:08,232 --> 00:01:10,631
"스크립트"를 추가하면 더 좋습니다

24
00:01:10,631 --> 00:01:12,505
package.json 파일에 추가하세요.

25
00:01:12,580 --> 00:01:15,155
우리는 "dev" 스크립트를 정의할 수 있습니다.

26
00:01:15,155 --> 00:01:17,275
"next dev" 명령을 실행합니다.

27
00:01:17,350 --> 00:01:19,041
이렇게 터미널에서

28
00:01:19,110 --> 00:01:22,219
대신 "npm run dev"라고 입력하면 됩니다.

29
00:01:22,219 --> 00:01:25,185
그러면 "next dev"가 실행됩니다.

30
00:01:25,185 --> 00:01:28,151
포트 3000에서 서버를 시작합니다.

31
00:01:28,240 --> 00:01:31,857
package.json에 모든 스크립트를 나열하여

32
00:01:31,857 --> 00:01:34,527
또한 어떤 명령이 무엇인지 확인하기가 더 쉽습니다.

33
00:01:34,527 --> 00:01:36,565
우리 프로젝트에서 사용할 수 있습니다.

34
00:01:36,635 --> 00:01:39,053
어쨌든, 브라우저로 돌아가면,

35
00:01:39,053 --> 00:01:40,360
페이지를 새로고침하고,

36
00:01:40,426 --> 00:01:42,586
이제 표시되는 것을 볼 수 있습니다

37
00:01:42,586 --> 00:01:44,747
우리가 코드에 쓴 제목입니다.

38
00:01:44,812 --> 00:01:48,684
따라서 우리 홈페이지가 올바르게 표시되고 있습니다.

39
00:01:48,684 --> 00:01:51,508
이제 우리 페이지 작업을 하면서 나는

40
00:01:51,508 --> 00:01:54,332
항상 Chrome 개발자 도구를 사용하세요.

41
00:01:54,406 --> 00:01:56,651
이 메뉴에서 열 수 있는 항목은

42
00:01:56,651 --> 00:01:58,557
또는 키보드 단축키를 사용합니다.

43
00:01:58,625 --> 00:02:01,488
이렇게 하면 모든 로그 메시지를 볼 수 있습니다.

44
00:02:01,488 --> 00:02:03,317
콘솔에 인쇄됩니다.

45
00:02:03,397 --> 00:02:06,751
대부분의 동영상에서는 브라우저도 유지하겠습니다.

46
00:02:06,751 --> 00:02:09,583
오른쪽에 있는 작은 창에서

47
00:02:09,657 --> 00:02:12,036
Visual Studio Code 창

48
00:02:12,036 --> 00:02:13,909
나머지 화면에서는

49
00:02:13,981 --> 00:02:16,957
그러면 편집기에서 두 코드를 모두 볼 수 있고

50
00:02:16,957 --> 00:02:19,341
동시에 페이지가 무엇인지

51
00:02:19,341 --> 00:02:21,164
브라우저에 보이는 것 같아요.

52
00:02:21,234 --> 00:02:24,101
개발 서버가 자동으로 업데이트됩니다.

53
00:02:24,101 --> 00:02:26,753
코드를 수정할 때마다 페이지에 표시됩니다.

54
00:02:26,825 --> 00:02:29,402
예를 들어 이 제목을 변경해 보겠습니다.

55
00:02:29,565 --> 00:02:31,845
"Indie Gamer"로 설정하면

56
00:02:31,845 --> 00:02:34,055
우리 웹사이트의 이름이 될 거예요.

57
00:02:34,124 --> 00:02:37,000
이 변경 사항을 저장하자마자 페이지가

58
00:02:37,000 --> 00:02:39,444
새 텍스트가 업데이트되어 표시됩니다.

59
00:02:39,516 --> 00:02:41,589
대부분의 경우 우리는 떠날 수 있다

60
00:02:41,589 --> 00:02:43,448
터미널 패널이 닫혔습니다.

61
00:02:43,519 --> 00:02:46,651
어쨌든 개발 서버는 계속 실행됩니다.

62
00:02:46,651 --> 00:02:49,187
이 페이지에 단락을 추가할 수 있습니다.

63
00:02:49,291 --> 00:02:51,560
"만"이라는 태그라인과 함께

64
00:02:51,560 --> 00:02:53,343
최고의 인디 게임"

65
00:02:53,424 --> 00:02:54,878
"당신을 위해 검토되었습니다".

66
00:02:56,064 --> 00:03:00,275
이제 JSX에는 단일 루트 요소가 있어야 합니다.

67
00:03:00,275 --> 00:03:03,700
그래서 모든 것을 React 프래그먼트로 감싸겠습니다.

68
00:03:03,700 --> 00:03:05,669
그게 바로 이 특별한 요소야

69
00:03:05,669 --> 00:03:07,356
빈 태그로 작성되었습니다.

70
00:03:07,427 --> 00:03:09,873
이렇게 하면 페이지가 두 가지를 모두 렌더링합니다.

71
00:03:09,873 --> 00:03:12,031
제목과 단락.

72
00:03:12,103 --> 00:03:14,605
따라서 이 페이지는 거의 작동합니다.

73
00:03:14,605 --> 00:03:17,106
다른 React 구성 요소와 마찬가지로.

74
00:03:17,187 --> 00:03:19,801
Next.js의 특별한 점은 무엇인가요?

75
00:03:19,801 --> 00:03:22,236
그리고 앱 라우터는

76
00:03:22,326 --> 00:03:25,562
페이지에 있는 내용이 삽입됩니다.

77
00:03:25,562 --> 00:03:28,716
RootLayout에 의해 정의된 문서입니다.

78
00:03:28,797 --> 00:03:31,553
지금 이 레이아웃은 단순히 표시됩니다.

79
00:03:31,553 --> 00:03:33,863
"몸" 안에 있는 아이들.

80
00:03:33,937 --> 00:03:36,827
하지만 여기에 다른 요소를 추가할 수도 있습니다.

81
00:03:36,827 --> 00:03:39,505
예를 들어 대부분의 앱에서 우리는

82
00:03:39,505 --> 00:03:42,182
모든 페이지에 대한 공통 "헤더"입니다.

83
00:03:42,256 --> 00:03:46,049
지금은 자리 표시자 텍스트만 작성하겠습니다.

84
00:03:46,049 --> 00:03:49,704
그러면 페이지 내용이 중심 부분이 됩니다.

85
00:03:49,704 --> 00:03:53,108
사실 우리는 그것을 "main" 요소로 감쌀 수 있습니다.

86
00:03:53,108 --> 00:03:55,630
이는 좋은 습관이며 앞으로도 그럴 것입니다.

87
00:03:55,630 --> 00:03:57,634
스타일링에도 유용합니다.

88
00:03:57,708 --> 00:04:00,626
우리는 일반적으로 "바닥글"도 원할 것입니다.

89
00:04:00,788 --> 00:04:03,052
다른 콘텐츠를 보여줍니다.

90
00:04:03,052 --> 00:04:05,716
업데이트된 레이아웃을 저장하면

91
00:04:05,716 --> 00:04:07,983
이제 우리 페이지를 볼 수 있습니다

92
00:04:07,983 --> 00:04:10,017
머리글과 바닥글이 있습니다.

93
00:04:10,095 --> 00:04:13,197
그런데 대괄호 안에 텍스트를 넣었습니다.

94
00:04:13,197 --> 00:04:16,161
단지 자리 표시자임을 나타내기 위한 것입니다.

95
00:04:16,230 --> 00:04:19,728
특별한 구문이나 그런 것이 아닙니다.

96
00:04:19,728 --> 00:04:22,269
요점은 우리가

97
00:04:22,269 --> 00:04:24,425
페이지 구성요소로 복귀

98
00:04:24,502 --> 00:04:27,285
그 내부에서 렌더링됩니다

99
00:04:27,285 --> 00:04:29,233
레이아웃 구성 요소.

100
00:04:29,326 --> 00:04:31,599
그래서 이런 의미에서 생각할 수 있습니다

101
00:04:31,599 --> 00:04:33,720
레이아웃을 템플릿으로,

102
00:04:33,796 --> 00:04:36,479
모든 페이지에 적용됩니다.